<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="card-panel" style="background-color: #52addd">
          <div class="card-panel-icon-wrapper">
            <i class="el-icon-user" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">用户数量</div>
            <countTo class="card-panel-count-to" :start-val="startVal" :end-val="endVal" :duration="3000" />
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="card-panel" style="background-color: #d5b182">
          <div class="card-panel-icon-wrapper">
            <i class="el-icon-shopping-cart-2" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">成交量</div>
            <countTo class="card-panel-count-to" :start-val="startVal" :end-val="endVal" :duration="3000" />
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="card-panel" style="background-color: #8fbc8fd4">
          <div class="card-panel-icon-wrapper">
            <i class="el-icon-eleme" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">访问量</div>
            <countTo class="card-panel-count-to" :start-val="startVal" :end-val="endVal" :duration="3000" />
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="card-panel" style="background-color: #9370dbd6">
          <div class="card-panel-icon-wrapper">
            <i class="el-icon-star-off" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">收藏</div>
            <countTo class="card-panel-count-to" :start-val="startVal" :end-val="endVal" :duration="3000" />
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="block">
          <bar-chart />
          <el-timeline>
            <el-timeline-item timestamp="2021/10/04" placement="top">
              <el-card>
                <h4>创建voyage交易平台项目</h4>
                <p>Voyage 提交于 2021/10/04 20:46</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2021/10/09" placement="top">
              <el-card>
                <h4>更新 Github 模板</h4>
                <p>王小虎 提交于 2021/10/09 20:46</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2018/10/10" placement="top">
              <el-card>
                <h4>部署Voyage项目</h4>
                <p>Voyage 提交于 2021/10/10 15:12</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2021/10/12" placement="top">
              <el-card>
                <h4>提交后端项目架构设计</h4>
                <p>Voyage 提交于 2021/10/12 22:18</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2021/10/12" placement="top">
              <el-card>
                <h4>至臻</h4>
                <p>Voyage 提交于 2021/10/12 21:03</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-col>

      <el-col :span="12">
        <el-calendar v-model="value" />
        <el-table
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column
            prop="date"
            label="日期"
            width="180"
          />
          <el-table-column
            prop="name"
            label="姓名"
            width="180"
          />
          <el-table-column
            prop="address"
            label="地址"
          />
        </el-table>

      </el-col>
    </el-row>
  </div>
</template>

<script>
import countTo from 'vue-count-to'
import BarChart from '@/views/echart/BarChart'

export default {
  name: 'Dashboard',
  components: {
    BarChart,
    countTo
  },
  data() {
    return {
      startVal: 0,
      endVal: 2021,
      value: new Date(),
      loading: false,
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
    }
  },
  mounted() {
    // this.drawLine()
  },
  methods: {
    // drawLine() {
    //   // 基于准备好的dom，初始化echarts实例
    //   let myChart = this.$echarts.init(document.getElementById('myChart'))
    //   // 绘制图表
    //   myChart.setOption({
    //     xAxis: {
    //       type: 'category',
    //       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    //     },
    //     yAxis: {
    //       type: 'value'
    //     },
    //     series: [
    //       {
    //         data: [150, 230, 224, 218, 135, 147, 260],
    //         type: 'line'
    //       }
    //     ]
    //   });
    // },
  }

}
</script>

<style scoped>
.card-panel {
  border-radius: 5px;
  cursor: pointer;
  color: #d9ecff;
}

.card-panel-icon-wrapper {
  text-align: center;
  font-size: 52px;
}

.card-panel-description {
  display: flex;
  flex-direction: column;
}

.card-panel-text {
  text-align: center;
  font-size: 20px;
  color: #333333;
  padding: 10px 10px;
  color: #d9ecff;
}

.card-panel-count-to {
  text-align: center;
  font-size: 20px;
  color: #333333;
  padding: 10px 10px;
  color: #d9ecff;
}
i {
  box-shadow: 0 3px 5px -5px #333
}
</style>
